<div ng-controller="Umbraco.Editors.Packages.RepoController as vm" class="clearfix">

    <umb-load-indicator ng-show="vm.loading"></umb-load-indicator>

    <!-- LIST -->
    <div class="umb-packages-view-wrapper" ng-if="vm.packageViewState === 'packageList'">

        <div class="umb-packages-section">
            <div class="umb-packages-search">
                <input class="-full-width-input" type="text" name="query" localize="placeholder" placeholder="@packager_packageSearch" umb-auto-focus ng-model="vm.searchQuery" ng-change="vm.search()" no-dirty-check>
            </div>
        </div>

        <div ng-show="vm.loading === false">

            <div class="umb-packages-section" ng-if="vm.searchQuery == ''">
                <div class="umb-packages-categories">
                    <a href=""
                       class="umb-packages-category"
                       ng-click="vm.selectCategory(category, vm.categories)"
                       ng-repeat="category in vm.categories"
                       ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
                        <div>{{ category.name }}</div>
                    </a>
                </div>
            </div>

            <div class="umb-packages-section" ng-if="vm.searchQuery == ''">
                <h4><strong><localize key="packager_packagesPopular">Popular</localize></strong></h4>
                <div class="umb-packages clearfix">

                    <div class="umb-package" ng-repeat="package in vm.popular">
                        <a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">

                            <div class="umb-package-icon">
                                <img ng-src="{{package.icon}}" alt="" />
                            </div>

                            <div class="umb-package-info">
                                <div class="umb-package-name">{{ package.name }}</div>
                                <div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>

                                <div class="umb-package-numbers">
                                    <small class="umb-package-downloads">
                                        <i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
                                    </small>
                                    <small class="umb-package-likes">
                                        <i class="icon-hearts"></i> <strong>{{ package.likes }}</strong>
                                    </small>
                                </div>

                            </div>
                        </a>
                    </div> <!-- end package -->

                </div> <!-- end packages -->
            </div>

            <div class="umb-packages-section" ng-if="vm.packages.length > 0">

                <h4 ng-if="vm.searchQuery === ''"><strong><localize key="packager_packagesNew">New Releases</localize></strong></h4>
                <h4 ng-if="vm.searchQuery !== ''"><strong><localize key="packager_packageSearchResults">Results for</localize> '{{ vm.searchQuery }}'</strong></h4>

                <div class="umb-packages clearfix">

                    <div class="umb-package" ng-repeat="package in vm.packages">
                        <a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">

                            <div class="umb-package-icon">
                                <img ng-src="{{ package.icon }}" alt="" />
                            </div>

                            <div class="umb-package-info">
                                <div class="umb-package-name">{{ package.name }}</div>
                                <div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>

                                <div class="umb-package-numbers">
                                    <small class="umb-package-downloads">
                                        <i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
                                    </small>
                                    <small class="umb-package-likes">
                                        <i class="icon-hearts"></i> <strong>{{ package.likes }}</strong>
                                    </small>
                                </div>

                            </div>
                        </a>
                    </div> <!-- end package -->

                </div> <!-- end packages -->
            </div>

            <div class="umb-packages__pagination" ng-if="vm.pagination.totalPages > 1 && vm.loading === false">

                <umb-pagination page-number="vm.pagination.pageNumber"
                                total-pages="vm.pagination.totalPages"
                                on-next="vm.nextPage"
                                on-prev="vm.prevPage"
                                on-go-to-page="vm.goToPage">
                </umb-pagination>

            </div>

            <!-- Empty state -->
            <umb-empty-state
                ng-if="vm.packages.length === 0 && vm.loading === false && vm.searchQuery !== ''"
                position="center">
                <h4><strong><localize key="packager_packageNoResults">We couldn't find anything for</localize> '{{ vm.searchQuery }}'</strong></h4>
                <p class="faded"><localize key="packager_packageNoResultsDescription">Please try searching for another package or browse through the categories</localize>.</p>
            </umb-empty-state>

        </div>

    </div>


    <!-- DETAILS -->
    <div ng-if="vm.packageViewState === 'packageDetails' && vm.loading === false">

        <umb-editor-sub-header>
            <umb-editor-sub-header-content-left>
                <a class="umb-package-details__back-link" href="" ng-click="vm.setPackageViewState('packageList');">&larr; <localize key="general_back">Back</localize></a>
            </umb-editor-sub-header-content-left>
        </umb-editor-sub-header>

        <div class="umb-packages-view-wrapper">

            <div class="umb-package-details">

                <div class="umb-package-details__main-content">

                    <div class="umb-packages-view-title">{{ vm.package.name }}</div>

                    <div class="umb-package-details__description" ng-bind-html-unsafe="vm.package.description"></div>

                    <div class="umb-gallery">
                        <div class="umb-gallery__thumbnails">
                        <a class="umb-gallery__thumbnail" ng-repeat="image in vm.package.images" ng-click="vm.openLightbox($index, vm.package.images)">
                                <img ng-src="{{ image.thumbnail }}" />
                            </a>
                        </div>
                    </div>

                <umb-lightbox
                    ng-if="vm.lightbox.show"
                    items="vm.lightbox.items"
                    active-item-index="vm.lightbox.activeIndex"
                    on-close="vm.closeLightbox">
                </umb-lightbox>

                </div>

                <div class="umb-package-details__sidebar">

                    <div class="umb-package-details__section">
                        <button class="umb-era-button -green -full-width"
                                ng-if="vm.package.isValid === true"
                                ng-click="vm.downloadPackage(vm.package)"><localize key="packager_packageInstall">Install package</localize></button>

                        <button class="umb-era-button -inactive -full-width" ng-if="vm.package.isValid === false" disabled>
                            <localize key="packager_packageAlreadyInstalled">Package is already installed</localize>
                        </button>
                    </div>

                    <div class="umb-package-details__section">
                        <div class="umb-package-details__owner-profile">

                            <div class="umb-package-details__owner-profile-avatar">
                            <umb-avatar
                                size="m"
                                img-src="{{ 'https://our.umbraco.com' + vm.package.ownerInfo.ownerAvatar }}">
                            </umb-avatar>
                            </div>

                            <div>
                                <div class="umb-package-details__owner-profile-name">{{ vm.package.ownerInfo.owner }}</div>
                                <div class="umb-package-details__owner-profile-karma">
                                    {{ vm.package.ownerInfo.owner }} <localize key="packager_packageHas">has</localize> <strong>{{ vm.package.ownerInfo.karma }}</strong> <localize key="packager_packageKarmaPoints">karma points</localize>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="umb-package-details__section">
                        <div class="umb-package-details__section-title"><localize key="packager_packageInfo">Information</localize></div>
                        <div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.owner">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageOwner">Owner</localize>:</div>
                                <div class="umb-package-details__information-item-content">{{vm.package.ownerInfo.owner}}</div>
                            </div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.contributors">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageContrib">Contributors</localize>:</div>
                                <div class="umb-package-details__information-item-content">
                                    <span ng-repeat="contributor in vm.package.ownerInfo.contributors">{{ contributor }}<span ng-if="!$last">,&nbsp;</span></span>
                                </div>
                            </div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.created">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageCreated">Created</localize>:</div>
                                <div class="umb-package-details__information-item-content">{{vm.package.created | date:'yyyy-MM-dd HH:mm:ss'}}</div>
                            </div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.latestVersion">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageCurrentVersion">Current version</localize>:</div>
                                <div class="umb-package-details__information-item-content">{{vm.package.latestVersion}}</div>
                            </div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.information.netVersion">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageNetVersion">.NET Version</localize>:</div>
                                <div class="umb-package-details__information-item-content">{{vm.package.information.netVersion}}</div>
                            </div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.licenseName">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageLicense">License</localize>:</div>
                                <div class="umb-package-details__information-item-content">{{vm.package.licenseName}}</div>
                            </div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.downloads">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageDownloads">Downloads</localize>:</div>
                                <div class="umb-package-details__information-item-content">{{vm.package.downloads}}</div>
                            </div>

                            <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.karma">
                                <div class="umb-package-details__information-item-label"><localize key="packager_packageLikes">Likes</localize>:</div>
                                <div class="umb-package-details__information-item-content">{{vm.package.likes}}</div>
                            </div>

                        </div>
                    </div>

                    <div class="umb-package-details__section">
                        <div class="umb-package-details__section-title"><localize key="packager_packageCompatibility">Compatibility</localize></div>
                        <div class="umb-package-details__section-description"><localize key="packager_packageCompatibilityDescription">This package is compatible with the following versions of Umbraco, as reported by community members. Full compatability cannot be gauranteed for versions reported below 100%</localize></div>
                        <div class="umb-package-details__compatability" ng-repeat="compatibility in vm.package.compatibility | filter:percentage > 0">
                            <div class="umb-package-details__compatability-label">
                                <span class="umb-package-details__information-item-label">{{compatibility.version}}</span>
                                <span class="umb-package-details__information-item-label-2">({{compatibility.percentage}}%)</span>
                            </div>

                        <umb-progress-bar
                            percentage="{{compatibility.percentage}}">
                        </umb-progress-bar>

                        </div>
                    </div>

                    <div class="umb-package-details__section" ng-if="vm.package.externalSources">
                        <div class="umb-package-details__section-title"><localize key="packager_packageExternalSources">External sources</localize></div>
                        <div>
                            <div class="umb-package-details__information-item" ng-repeat="externalSource in vm.package.externalSources">
                                <a class="umb-package-details__link" target="_blank" href="{{ externalSource.url }}">
                                    <i class="icon-out"></i>
                                    {{ externalSource.name }}
                                </a>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- Package details -->
    <div ng-if="vm.packageViewState === 'packageInstall' && vm.loading === false">
        <umb-editor-sub-header>
            <umb-editor-sub-header-content-left>
                <a class="umb-package-details__back-link" href="" ng-click="vm.setPackageViewState('packageDetails');">&larr; <localize key="general_back">Back</localize></a>
            </umb-editor-sub-header-content-left>
        </umb-editor-sub-header>

        <div class="umb-packages-view-wrapper">

            <div class="flex items-center justify-center">

                <div class="umb-info-local-items">

                    <form novalidate name="localPackageForm" class="w-100">
                        <div class="umb-package-icon">
                            <i ng-if="!vm.localPackage.icon" class="icon-box"></i>
                            <img ng-if="vm.localPackage.icon" ng-src="{{vm.localPackage.icon}}" alt="" />
                        </div>


                        <div class="umb-package-info">
                            <h4 class="umb-info-local-item"><strong>{{ vm.localPackage.name }}</strong></h4>

                            <div class="umb-info-local-item">
                                <strong>Author</strong>
                                <a href="{{ vm.localPackage.authorLink }}" target="_blank">{{ vm.localPackage.author }}</a>
                            </div>

                            <div class="umb-info-local-item">
                                <strong><localize key="packager_packageVersion">Version</localize></strong>
                                {{ vm.localPackage.version }}
                            </div>

                            <div class="umb-info-local-item">
                                <strong><localize key="packager_packageLicense">License</localize></strong>
                                <a href="{{ vm.localPackage.licenseUrl }}" target="_blank">{{ vm.localPackage.license }}</a>
                            </div>

                            <div class="umb-info-local-item">
                                <strong><localize key="packager_packageReadme">Read me</localize></strong>
                                <br>
                                <small  ng-bind-html-unsafe="vm.localPackage.readMe"></small>
                            </div>

                            <div class="umb-info-local-item mt4 flex items-center flex-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
                                <label for="license-accept" class="umb-package-installer-label">
                                    <input type="checkbox" id="license-accept" ng-model="vm.localPackage.packageLicenseAccept" required no-dirty-check>
                                    <strong class="label-text"><localize key="packager_accept">I accept</localize> <a href="{{ vm.localPackage.licenseUrl }}" target="_blank"><localize key="packager_termsOfUse">terms of use</localize></a></strong>
                                </label>
                                <button type="button"
                                        ng-if="vm.installState.type !== 'error'"
                                        ng-class="{'-inactive' : localPackageForm.$invalid}"
                                        ng-disabled="localPackageForm.$invalid"
                                        class="umb-era-button -green flex-inline mt3"
                                        ng-click="vm.installPackage(vm.localPackage)">
                                    <localize key="packager_packageInstall">Install package</localize>
                                </button>
                            </div>

                            <div class="umb-info-local-item">
                                <umb-progress-bar
                                    ng-if="vm.installState.status !== ''"
                                    percentage="{{vm.installState.progress}}">
                                </umb-progress-bar>
                            </div>

                            <div class="umb-info-local-item text-error" ng-if="!vm.localPackage.isCompatible">
                                <localize key="packager_targetVersionMismatch">This package cannot be installed, it requires a minimum Umbraco version of</localize> {{vm.localPackage.umbracoVersion}}
                            </div>

                            <div class="umb-info-local-item text-info" ng-class="{'text-info' : vm.installState.type !== 'error'}">
                                <p>{{vm.installState.status}}</p>
                            </div>

                            <div class="umb-info-local-item text-info"
                                 ng-show="vm.installCompleted">

                                <button type="button"
                                        class="btn btn-success flex-inline mt3"
                                        ng-click="vm.reloadPage()">
                                    <localize key="packager_installFinish">Finish</localize>
                                </button>
                            </div>

                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

</div>
